<template>
  <div class="addCart">
    <div class="cart-notice">已满足免邮条件</div>
    <ul class="cart-GroupList">
      <li class="item">
        <div class="m-cartGroup">
          <div>
            <header class="hd">
              <div class="promotion">
                <a href="" class="promotion-right">
                  <span class="cart-tag">全场换购</span>
                  <p class="promTip">再购99元享超值换购</p>
                  <div class="promBtn">
                    去凑单
                    <i class="icon-arrow"></i>
                  </div>
                </a>
              </div>
              <a href="" class="promGuide getGift">
                查看换购商品
                <i class="icon-arrow"></i>
              </a>
            </header>
          </div>
        </div>
      </li>
      <li class="item">
        <div class="m-cartGroup">
          <ul class="list">
            <li class="item">
              <div class="m-swipeOut">
                <div class="inner">
                  <div class="cnt">
                    <div class="m-cartGood">
                      <!-- 根据数据是否渲染 -->
                      <div class="promotionBar" v-if="''">
                        <span class="timingTag">限时抢购中</span>
                        <span class="finishTips">距优惠结束</span>
                        <div class="m-countdown m-countdown-dayHour">
                          33天4小时
                        </div>
                      </div>
                      <div class="m-cartGoodIn">
                        <van-checkbox-group
                          v-model="result"
                          ref="checkboxGroup"
                        >
                          <van-checkbox
                            v-model="checked"
                            @click="toggles"
                          ></van-checkbox>
                        </van-checkbox-group>

                        <i class="m-checkbox checkbox"></i>
                        <div class="imgWrap">
                          <img
                            src="https://yanxuan-item.nosdn.127.net/276099646eeb37b9ae354ccc21bb7034.png?type=webp&imageView&thumbnail=160x0&quality=75"
                            alt=""
                            class="img"
                          />
                          <!-- 根据数据是否渲染 -->
                          <span v-if="''" class="imgTag imgTag-yellow"
                            >限购1件</span
                          >
                        </div>
                        <div class="cnt">
                          <div class="linel">
                            <div class="name">
                              <!-- 根据数据是否渲染 -->
                              <span class="u-text-yellow" v-if="''">
                                新人特价
                              </span>
                              <span class="nameIn"
                                >洗感清爽不紧绷 清润茶语沐浴露</span
                              >
                            </div>
                          </div>
                          <div class="line2">
                            <span class="spec">390ml*2</span>
                            <i class="down-arrow"></i>
                          </div>
                          <div class="line3">
                            <span class="price">
                              ¥{{ this.reducedPrice }}
                            </span>
                            <span class="originalPrice"
                              >¥{{ this.agoPrice }}</span
                            >
                            <!-- 根据数据是否渲染 -->
                            <div
                              class="priceReductDesc j-priceReductDesc"
                              v-if="''"
                            >
                              比加入时省11.9元
                            </div>
                          </div>
                          <div class="m-selnum">
                            <van-stepper v-model="value" integer />
                          </div>
                        </div>
                      </div>
                      <div class="warehouseInfo">
                        <i class="icon-store"></i>
                        <span>自营仓商品满99免邮</span>
                      </div>
                      <div class="goodExtraInfo">
                        <div class="cartItemMap extraInfo">
                          <div class="item-wraper">
                            <div class="item">订单满129元可购买,已满足条件</div>
                            <div class="item">
                              该福利商品将于2021-07-16 20:32失效，请及时购买
                            </div>
                          </div>
                          <div class="item-wraper">
                            <div class="item">该商品不参加全场活动</div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </li>
    </ul>
    <van-submit-bar
      style="bottom: 50px !import,height: 79.8px "
      :price="0"
      button-text="提交订单"
      @submit="onSubmit()"
      :disabled="!submitChange?disableds:disableds=false"
    >
      <van-checkbox v-model="checked" @click="checkAll"
        >已选({{ this.submitChange ? this.value : 0 }})</van-checkbox
      >
      <p class="promotionPrice" v-if="''">
        已优惠 ￥{{ (this.agoPrice - this.reducedPrice).toFixed(2) }}
      </p>
    </van-submit-bar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: false,
      value: 1,
      result: [],
      flag: null, //单击全选 双击取消全选
      flag1: null,
      submitChange: false,
      reducedPrice: 57.8,
      agoPrice: 72,
      disableds:true
    };
  },
  methods: {
    onSubmit() {
      // if (!this.submitChange) return (this.disableds = false);
      console.log(this.$route);
      fullPath: "/address"
    },
    checkAll() {
      if (this.flag) {
        this.flag = null;
        this.$refs.checkboxGroup.toggleAll();
        this.submitChange = false;
        return;
      }
      this.flag = true;
      this.$refs.checkboxGroup.toggleAll(this.flag);
      this.submitChange = true;
    },
    toggles() {
      if (this.flag1) {
        this.flag1 = null;
        this.submitChange = false;
        return;
      }
      this.flag1 = true;
      this.submitChange = true;
    },
  },
};
</script>

<style lang="less" scoped>
.addCart {
  position: relative;
  top: 54.53px;
  .van-submit-bar {
    margin-bottom: 16.625px;
    height: 79.8px !important;
    .van-submit-bar__bar {
      padding: 0 0 0 19.95px;
    }
  }
  .cart-notice {
    font-size: 21.28px;
    line-height: 53.2px;
    padding: 0 19.95px;
    color: #f48f18;
    background: #fff8d8;
    display: flex;
    overflow: hidden;
    align-items: center;
    flex-flow: row nowrap;
    height: 53.2px;
  }
  .cart-GroupList {
    .item {
      margin-bottom: 13.33px;
      .m-cartGroup {
        background: #fff;
        .promotionBar {
          margin-bottom: -2.66px;
          padding-top: 13.33px;
          height: 34.58px;
          line-height: 34.58px;
          .timingTag {
            border: 1px solid #f48f18;
            border-radius: 2.66px;
            font-size: 15.96px;
            color: #f48f18;
            line-height: 23.94px;
            padding: 0 5.32px;
            font-family: PingFangSC-Regular;
          }
          .finishTips {
            margin: 07.98px 0 5.32px;
            font-size: 13.33;
          }
          .m-countdown {
            display: inline-block;
            font-weight: 700;
            font-size: 13.33;
          }
        }
        .hd {
          overflow: hidden;
          .promotion {
            margin-left: 19.95px;
            padding: 13.33px 19.95px 13.33px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .promotion-right {
              display: flex;
              flex-grow: 1;
              justify-content: space-between;
              align-items: center;
              .cart-tag {
                padding: 0 5.32px;
                margin: 0 10.64px 0 2.66px;
                background: #fc865f;
                border-radius: 2.66px;
                line-height: 21.28px;
                text-align: center;
                color: #fff;
                font-size: 15.96px;
              }
              .promTip {
                color: #333;
                line-height: 26.66px;
                font-size: 17.29px;
                flex-grow: 1;
              }
              .promBtn {
                color: #dd1a21;
                font-size: 15.96px;
                line-height: 23.275px;
                margin-left: 19.95px;
                .icon-arrow {
                  margin: 5.32px 0 0 5.32px;
                  vertical-align: top;
                  background-image: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/arrow_red_ic-8ef796200c.png");
                  width: 6.65px;
                  height: 11.97px;
                  background-size: 100% 100%;
                  display: inline-block;
                }
              }
            }
          }
          .promGuide {
            color: #333;
            white-space: nowrap;
            display: block;
            margin: 0 19.95px 6.65px 57.19px;
            padding: 0 13.33px;
            font-size: 15.96px;
            line-height: 28px;
            background: rgba(252, 134, 95, 0.06);
            border-radius: 6.65px;
            .icon-arrow {
              float: right;
              margin-top: 12.635px;
              vertical-align: top;
              background-image: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/arrow_black_ic-b6eb851bba.png");
              width: 6.65px;
              height: 11.97px;
              background-size: 100%;
            }
          }
        }
        .list {
          .item {
            position: relative;
            .m-swipeOut {
              overflow: hidden;
              width: 100%;
              background: #fff;
              .inner {
                width: 100%;
                position: relative;
                .m-cartGood {
                  padding-left: 57.19px;

                  .m-cartGoodIn {
                    display: block;
                    height: 146.3px;
                    padding: 15.96px 19.95px 0 0;
                    position: relative;
                    .van-checkbox {
                      width: 25.27px;
                      height: 25.27px;
                      position: absolute;
                      margin: auto;
                      top: 61.18px;
                      left: -37.24px;
                    }

                    .imgWrap {
                      float: left;
                      position: relative;
                      overflow: hidden;
                      background: #eee;
                      border-radius: 5.32px;
                      margin-right: 13.33px;
                      img {
                        display: block;
                        width: 114.38px;
                        height: 114.38px;
                      }
                      .imgTag-yellow {
                        background-color: #f48f18;
                      }
                      .imgTag {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        line-height: 23.94px;
                        font-size: 21.28px;
                        color: #fff;
                        text-align: center;
                      }
                    }
                    .cnt {
                      position: relative;
                      height: 114.38px;
                      margin: 0 0 0 127.68px;
                      box-sizing: border-box;
                      .linel {
                        display: flex;
                        justify-content: space-between;
                        font-size: 19.95px;
                        .u-text-yellow {
                          color: #f48f18;
                        }
                        .nameIn {
                          line-height: 23.275px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          word-break: break-all;
                        }
                      }
                      .line2 {
                        color: #7f7f7f;
                        background: #fafafa;
                        border: 1.33px solid #efefef;
                        border-radius: 2.66px;
                        padding: 0 6.65px;
                        margin-top: 6.65px;
                        display: inline-block;
                        line-height: 25.27px;
                        font-size: 15.96px;
                        .spec {
                          display: inline-block;
                          color: #7f7f7f;
                          text-overflow: ellipsis;
                          overflow: hidden;
                          white-space: nowrap;
                        }
                        .down-arrow {
                          display: inline-block;
                          vertical-align: top;
                          margin: 6.65px 6.65px 0 8.645px;
                          background-image: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/arrow_black_ic-b6eb851bba.png?imageView&type=webp");
                          width: 6.65px;
                          height: 11.97px;
                          background-size: 100% 100%;
                          background-repeat: no-repeat;
                          transform: rotate(90deg);
                        }
                      }
                      .line3 {
                        position: absolute;
                        bottom: -6.65px;
                        left: 0;
                        width: 176.89px;
                        line-height: 27.93px;
                        font-size: 18.62px;
                        .price {
                          font-family: PingFangSC-Medium;
                        }
                        .originalPrice::before {
                          content: "";
                          position: absolute;
                          top: 0;
                          bottom: 0;
                          left: 0;
                          width: 100%;
                          height: 1.33px;
                          margin: auto;
                          background-color: #999;
                        }
                        .originalPrice {
                          position: relative;
                          font-size: 18.62px;
                          color: #999;
                          margin-left: 5.32px;
                        }
                        .priceReductDesc {
                          font-size: 31.92px;
                          position: absolute;
                          top: 30.59px;
                          left: 0;
                          padding: 2.66px 10.64px;
                          text-align: center;
                          white-space: nowrap;
                          border-radius: 5.32px;
                          border: 1.33px solid #f48f18;
                          transform: scale(0.5);
                          transform-origin: left top;
                          color: #f48f18;
                          box-sizing: border-box;
                        }
                        .priceReductDesc:before {
                          content: "";
                          position: absolute;
                          width: 0;
                          height: 0;
                          border: 7.98px solid transparent;
                          border-bottom-color: #fff;
                          top: -15.96px;
                          left: 35.91px;
                          z-index: 1;
                        }
                        .priceReductDesc:after {
                          content: "";
                          width: 0;
                          height: 0;
                          border: 9.31px solid transparent;
                          border-bottom-color: #f48f18;
                          position: absolute;
                          top: -19.95px;
                          left: 0.34.58px;
                          transform-origin: left center;
                          box-sizing: border-box;
                        }
                      }
                      .m-selnum {
                        position: absolute;
                        right: 0;
                        bottom: -2.66px;
                        padding-top: 1.33px;
                        height: 35.91px;
                        box-sizing: border-box;
                      }
                    }
                  }
                  .warehouseInfo {
                    font-size: 13.33px;
                    line-height: 19.95px;
                    color: #7f7f7f;
                    margin-bottom: 15.96px;
                    .icon-store {
                      margin-right: 6.65px;
                      background-image: url("https://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/warehouse-aa4ee7dd6e.png?imageView&type=webp");
                      background-size: 100% 100%;
                      display: inline-block;
                      background-repeat: no-repeat;
                      width: 13.33px;
                      height: 13.33px;
                    }
                  }
                  .goodExtraInfo {
                    margin-right: 19.95px;
                    padding-left: 19.95px;
                    font-size: 15.96px;
                    background: #f4f4f4;
                    color: #7f7f7f;
                    border-radius: 2.66px;
                  }
                  .extraInfo:last-child {
                    margin-bottom: 15.96px;
                  }
                  .extraInfo:first-child {
                    border-top: none;
                    overflow: hidden;
                  }
                  .cartItemMap {
                    padding: 13.33px 0;
                    .item {
                      position: relative;
                      padding-left: 10.64px;
                      margin-right: 26.66px;
                      float: left;
                      line-height: 21.28px;
                      color: #7f7f7f;
                    }
                    .item:after {
                      content: "";
                      position: absolute;
                      width: 5.32px;
                      height: 5.32px;
                      background: #7f7f7f;
                      border-radius: 100%;
                      left: 0;
                      top: 7.98px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  .van-submit-bar {
    bottom: 50px !important;
    height: 60px;
    .van-submit-bar__bar::after {
      content: "";
      position: absolute;
      background-color: #d9d9d9;
      left: 0;
      width: 100%;
      height: 1px;
      transform-origin: 50% 100% 0;
      top: 0;
    }
    .van-submit-bar__bar,
    .van-submit-bar__bar .van-submit-bar__button {
      height: 100%;
      .van-button--round {
        border-radius: unset !important;
      }
    }
  }
}
</style>